<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .my-check {
            /* 一句话来描述就是 当Flex Box 容器没有设置宽度大小限制时，
            当display 指定为 flex 时，FlexBox 的宽度会填充父容器，
            当display指定为 inline-flex 时，FlexBox的宽度会包裹子Item， */
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            border-radius: 15px;
            box-sizing: border-box;

            border: 1px solid #aaa;

            cursor: pointer;
        }

        .my-check .my-check__body  {
            width: 12px;
            height: 12px;
            background-color: #eee;
            border-radius: 20px;
            box-sizing: border-box;
        }


        .my-check .my-check__body.active  {
            background-color: rgb(41, 182, 41);
        }

    </style>
</head>
<body>
    <div id="app">
        <!-- <my-check :value="flag" @change="flag=$event"></my-check> -->

        <!-- 上面的语法糖写法，自定义组件 -->
        <!-- v-model只能绑定一条数据，.sync可以绑定多条数据 -->
        <my-check v-model="flag"></my-check>
        <button @click="flag=!flag">按钮</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        Vue.component("MyCheck",{
            template: `<div class="my-check" @click="$emit('change',!value)">
                            <div class="my-check__body" :class="{active: value}"></div>
                       </div>`,
            props:{
                value:{
                    type: Boolean,
                    default: false
                }
            },
            model:{
                event: "change",//事件，子组件影响父组件的事件
                prop: "value"//父组件给子组件传参是给了那个prop
            }

        })

        var vm = new Vue({
            el: "#app",
            data: {
                flag: true,
            }
        })
    </script>
</body>
</html>